<template>
  <div class="container">
    <button @click="getPort">获取后端端口号1</button>
    <div v-if="port">后端端口号：{{ port }}</div>
  </div>
  <div class="container">
    <button @click="getPort">获取后端端口号2</button>
    <div v-if="port">后端端口号：{{ port }}</div>
  </div>
  <div class="container">
    <button @click="getPort">获取后端端口号3</button>
    <div v-if="port">后端端口号：{{ port }}</div>
  </div>
  <div class="container">
    <button @click="getPort">获取后端端口号4</button>
    <div v-if="port">后端端口号：{{ port }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const port = ref<string>('')

const getPort = async () => {
  try {
    const response = await axios.get('http://localhost:8081/port')
    port.value = response.data
  } catch (error) {
    console.error('请求失败:', error)
    alert('获取端口号失败')
  }
}
</script>

<style>
.container {
  padding: 20px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>